<!-- meta tags and other links -->
<!-- Header -->
<!DOCTYPE html>
<html   lang="en"   xmlns:th="http://www.thymeleaf.org">
<head>
    <base href="/">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Title -->
    <title> Viserpet HTML Template</title>
    <!-- Favicon -->
    <link rel="shortcut icon" href="assets/picture/favicon.png">
    <!-- Bootstrap -->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <!-- Fontawesome -->
    <link rel="stylesheet" href="assets/css/fontawesome-all.min.css">
    <!-- Slick -->
    <link rel="stylesheet" href="assets/css/slick.css">
    <!-- line awesome -->
    <link rel="stylesheet" href="assets/css/line-awesome.min.css">
    <!-- countdown css link-->
    <link rel="stylesheet" href="assets/css/jquery.classycountdown.min.css">
    <!-- range css -->
    <link rel="stylesheet" href="assets/css/jquery-ui.css">
    <!-- magnific css link -->
    <link rel="stylesheet" href="assets/css/magnific-popup.css">
    <!-- Main css -->
    <link rel="stylesheet" href="assets/css/main.css">
</head>

<style>
    /* 增加按钮宽度和高度 */
    .page-link {
        padding: 20px 30px; /* 调整按钮的内边距 */
        font-size: 1.1rem; /* 调整字体大小 */
        color: #007bff; /* 调整字体颜色 */
        border: 1px solid #dee2e6; /* 添加边框 */
        margin: 0 0.25rem; /* 调整按钮之间的间距 */
    }

    /* 美化激活状态的按钮 */
    .page-item.active .page-link {
        background-color: #007bff; /* 背景颜色 */
        border-color: #007bff; /* 边框颜色 */
        color: #fff; /* 文字颜色 */
    }

    /* 禁用状态的按钮 */
    .page-item.disabled .page-link {
        color: #6c757d; /* 文字颜色 */
        pointer-events: none; /* 禁用点击事件 */
        background-color: #e9ecef; /* 背景颜色 */
        border-color: #dee2e6; /* 边框颜色 */
    }

    /* 悬停效果 */
    .page-link:hover {
        background-color: #f8f9fa; /* 背景颜色 */
        color: #0056b3; /* 文字颜色 */
    }
</style>
<body>
    
<!--==================== Preloader Start ====================-->
<div class="preloader">
    <div class="loader-p"></div>
  </div>
<!--==================== Preloader End ====================-->

<!--==================== Overlay Start ====================-->
<div class="body-overlay"></div>
<!--==================== Overlay End ====================-->

<!--==================== Sidebar Overlay End ====================-->
<div class="sidebar-overlay"></div>
<!--==================== Sidebar Overlay End ====================-->

<!-- ==================== Scroll to Top End Here ==================== -->
<a class="scroll-top"><i class="fas fa-angle-double-up"></i></a>
<!-- ==================== Scroll to Top End Here ==================== -->

<!-- ==================== Header Top Start Here ==================== -->
<div class="header-top">
    <div class="container">
        <div class="d-flex flex-wrap align-items-center justify-content-between">    
            <div class="top-contact">
                <a href="index.html" class="top-contact__logo">
                    <img src="assets/picture/logo02.png" alt="logo">
                </a>
            </div>      
              <div class="d-flex flex-wrap align-items-center justify-content-center">
                   <div class="d-md-block d-none">
                    <div class="contact-list__wrapper d-flex flex-wrap justify-content-between">
                    <div class="contact-list style-two">
                            <span class="contact-list__icon"> 
                                <img src="assets/picture/phone.png" alt="">
                            </span>
                            <span class="contact-list__info"> 000 - 8888 - 9999</span>
                      </div>
                      <div class="contact-list">
                            <span class="contact-list__icon"> 
                                <img src="assets/picture/email.png" alt="">
                            </span>
                            <span class="contact-list__info"> <a href="javascript:;" class="__cf_email__" data-cfemail="681e011b0d1a180d1c280f05090104460b0705">[email&#160;protected]</a></span>
                    </div>
                    </div>
                   </div>
                   <div class="currency-box">
                    <select class="select">
                        <option selected="">USD</option>
                        <option value="1">EURO</option>
                        <option value="2">RUPI</option>
                        <option value="3">DINAR</option>
                    </select>
                   </div>
              </div>
           
        </div>
    </div>
</div>



<!-- ==================== Header Top End Here ==================== -->
<nav class="category-two">
    <span class="close-sidebar"><i class="las la-times"></i></span>
    <ul class="category-menu-two">
        <li class="category-menu-two__item has-dropdown-two">
            <a href="#" class="category-menu-two__link">
                <span class="category-menu-two__thumb"><img src="assets/picture/dog01.png" alt=""></span> Dog Food <span class="category-menu-two__icon"><i class="las la-angle-down"></i></span></a>
            <ul class="category-dropdown-two">
                <li class="category-dropdown-two__item">
                    <a href="" class="category-dropdown-two__link">
                        <span class="category-dropdown-two__thumb">
                            <img src="assets/picture/dog01.png" alt="">
                        </span> Category Dropdown One</a>
                </li>
                <li class="category-dropdown-two__item">
                    <a href="" class="category-dropdown-two__link">
                        <span class="category-dropdown-two__thumb">
                            <img src="assets/picture/dog01.png" alt="">
                        </span> Category Dropdown Two</a>
                </li>
                <li class="category-dropdown-two__item">
                    <a href="" class="category-dropdown-two__link">
                        <span class="category-dropdown-two__thumb">
                            <img src="assets/picture/dog01.png" alt="">
                        </span> Category Dropdown Three</a>
                </li>
            </ul>
        </li>
        <li class="category-menu-two__item">
            <a href="" class="category-menu-two__link"><span class="category-menu-two__thumb"><img src="assets/picture/cat.png" alt=""></span> Cat </a>
        </li>
        <li class="category-menu-two__item">
            <a href="" class="category-menu-two__link"> <span class="category-menu-two__thumb"><img src="assets/picture/fish.png" alt=""></span> Fish </a>
        </li>
        <li class="category-menu-two__item">                 
            <a href="" class="category-menu-two__link"><span class="category-menu-two__thumb"><img src="assets/picture/toys.png" alt=""></span> Pet toy </a>
        </li>
        <li class="category-menu-two__item has-dropdown-two">
            <a href="#" class="category-menu-two__link">
                <span class="category-menu-two__thumb"><img src="assets/picture/parrot.png" alt=""></span> Parrot Food <span class="category-menu-two__icon"><i class="las la-angle-down"></i></span></a>
            <ul class="category-dropdown-two">
                <li class="category-dropdown-two__item">
                    <a href="" class="category-dropdown-two__link">
                        <span class="category-dropdown-two__thumb">
                            <img src="assets/picture/parrot.png" alt="">
                        </span> Category Dropdown One</a>
                </li>
                <li class="category-dropdown-two__item">
                    <a href="" class="category-dropdown-two__link">
                        <span class="category-dropdown-two__thumb">
                            <img src="assets/picture/parrot.png" alt="">
                        </span> Category Dropdown Two</a>
                </li>
                <li class="category-dropdown-two__item">
                    <a href="" class="category-dropdown-two__link">
                        <span class="category-dropdown-two__thumb">
                            <img src="assets/picture/parrot.png" alt="">
                        </span> Category Dropdown Three</a>
                </li>
            </ul>
        </li>
        <li class="category-menu-two__item">
            <a href="" class="category-menu-two__link"><span class="category-menu-two__thumb"><img src="assets/picture/rabbit.png" alt=""></span> Rabbit </a>
        </li>
        <li class="category-menu-two__item">
            <a href="" class="category-menu-two__link"><span class="category-menu-two__thumb"><img src="assets/picture/accessories.png" alt=""></span> Accessories </a>
        </li>
        <li class="category-menu-two__item">
            <a href="" class="category-menu-two__link"><span class="category-menu-two__thumb"><img src="assets/picture/dog02.png" alt=""></span> Small pet </a>
        </li>
     </ul>
     <div class="contact-list__wrapper d-md-none d-block">
        <div class="contact-list">
             <span class="contact-list__icon">
                <img src="assets/picture/phone.png" alt="">
             </span>
             <span class="contact-list__info"> 000 - 8888 - 9999</span>
        </div>
        <div class="contact-list">
             <span class="contact-list__icon">
               <img src="assets/picture/email.png" alt="">
            </span>
             <span class="contact-list__info"> <a href="javascript:;" class="__cf_email__" data-cfemail="31475842544341544571565c50585d1f525e5c">[email&#160;protected]</a></span>
        </div>
     </div>
</nav>

<!-- ==================== Bottom Header End Here ==================== -->
<header class="main-header">
    <div class="container">
        <nav class="navbar navbar-expand-lg navbar-light">
            <button class="navbar-toggler header-button" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span id="hiddenNav"><i class="las la-bars"></i></span>
            </button>
            <div class="header-category-two">
                <button class="header-category-two__item">Categories <span class="header-category-two__icon"><i class="las la-bars"></i></span></button>
               
            </div>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav nav-menu me-auto">
                  <li class="nav-item dropdown">
                      <a class="nav-link" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Home <span class="nav-item__icon"><i class="las la-angle-down"></i></span></a>
                         <ul class="dropdown-menu">
                          <li class="dropdown-menu__list"><a class="dropdown-item dropdown-menu__link" href="index.html"> Home One </a></li>
                          <li class="dropdown-menu__list"><a class="dropdown-item dropdown-menu__link" href="index-two.html"> Home Two </a></li>
                         </ul>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" aria-current="page" href="about.html">About</a>
                    </li>
                    <li class="nav-item dropdown">
                      <a class="nav-link" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Pages <span class="nav-item__icon"><i class="las la-angle-down"></i></span></a>
                      <ul class="dropdown-menu">
                          <li class="dropdown-menu__list"><a class="dropdown-item dropdown-menu__link" href="">Product category</a></li>

                      </ul>
                      </li> 
                        <li class="nav-item dropdown">
                        <a class="nav-link" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Blog <span class="nav-item__icon"><i class="las la-angle-down"></i></span></a>
                        <ul class="dropdown-menu">
                            <li class="dropdown-menu__list"><a class="dropdown-item dropdown-menu__link" href="blog.html">Blog</a></li>
                            <li class="dropdown-menu__list"><a class="dropdown-item dropdown-menu__link" href="blog-details.html">Blog Details</a>
                          </li>
                        </ul>
                        </li> 
  
                    <li class="nav-item">
                      <a class="nav-link" href="contact.html">Contact</a>
                  </li>
                    <li class=" nav-item">
                      <div class="toggle-search-box d-none d-lg-block">
                          <button type="button" class="" data-bs-toggle="modal" data-bs-target="#search-box" data-bs-whatever="@mdo"><i class="las la-search"></i></button>
                      </div>
                    </li>
                </ul>
            </div>
            <div class="header-info">
                <div class="toggle-search-box d-lg-none d-block">
                    <button type="button" class="" data-bs-toggle="modal" data-bs-target="#search-box" data-bs-whatever="@mdo"><i class="las la-search"></i></button>
                </div>
              <div class="header-info__wishlist">
                 <a href="wishlist.html" class="header-info__link"><i class="far fa-heart"></i></a>
              </div>
              <div class="header-info__cart">
                     <a href="cart.html" class="header-info__link"><i class="fas fa-shopping-cart"></i></a>
                     <span class="header-info__cart-quantity">03</span>
              </div>
              <div class="header-info__user">
                 <a href="login.html" class="header-info__link"><i class="far fa-user"></i></a>
              </div>
           </div>
        </nav>
    </div>
  </header>
  <!-- ==================== Bottom Header End Here ==================== -->

   <!--========================== Search Modal Start ==========================-->
   <div class="overlay-search-box position-relative">
    <div class="modal fade" id="search-box" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-fullscreen modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="search-overlay-close" data-bs-dismiss="modal" aria-label="Close"><i class="las la-times"></i></button>
                </div>
                <div class="modal-body">
                    <form id="search-form">
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="search-box">
                                    <div class="input--group">
                                        <input type="text" id="search-input" class="form--control style-two" placeholder="Search....">
                                        <button class="search-btn" type="submit"><i class="las la-search"></i></button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
  </div>
  <!--========================== Search Modal End ==========================-->

<script>
document.getElementById('search-form').addEventListener('submit', function(event) {
event.preventDefault(); // 阻止表单默认提交行为

const searchQuery = document.getElementById('search-input').value;

// 发送搜索请求
fetch(`/api/search?query=${encodeURIComponent(searchQuery)}`)
.then(response => response.json())
.then(data => {
updateProductList(data); // 更新商品列表
})
.catch(error => {
console.error('Error:', error);
});
});

function updateProductList(products) {
const productContainer = document.querySelector('.row.justify-content-center.gy-4');
productContainer.innerHTML = ''; // 清空当前商品列表

if (products.length === 0) {
productContainer.innerHTML = '<p>No results found.</p>';
return;
}

// 动态生成商品卡片
products.forEach(product => {
const productCard = `
<div class="col-lg-4 col-md-6 col-sm-6 col-xsm-6">
    <div class="product-item">
        <div class="product-itemthumb">
            <a href="/product?id=${product.id}" class="product-itemthumb-link">
                <img src="${product.imgurl}" alt="">
            </a>
            <button class="product-itemicon">
                            <span class="product-itemicon-style">
                                <i class="las la-heart"></i>
                            </span>
            </button>
            <div class="product-itembadge">
                <span class="badge badge--base">Sale</span>
            </div>
        </div>
        <div class="product-itemcontent">
            <h5 class="product-itemtitle">
                <a href="/product?id=${product.id}" class="product-itemthumb-link">${product.name}</a>
            </h5>
            <ul class="product-info__rating justify-content-center">
                <li class="product-info__rating-item">
                    <i class="fas fa-star"></i>
                </li>
                <li class="product-info__rating-item">
                    <i class="fas fa-star"></i>
                </li>
                <li class="product-info__rating-item">
                    <i class="fas fa-star"></i>
                </li>
                <li class="product-info__rating-item">
                    <i class="fas fa-star"></i>
                </li>
                <li class="product-info__rating-item">
                    <i class="fas fa-star"></i>
                </li>
                <li class="product-infonumber">5.0</li>
            </ul>
            <h6 class="product-item__price">
                <span class="product-item__price-new">￥${product.oldprice}</span>
                <span class="product-itemprice-old">￥${product.price}</span>
            </h6>
            <input type="hidden" class="btn btn--base pill btn--sm" value="${product.categoryid}">
            <input type="button" class="btn btn--base pill btn--sm" value="添加到购物车" onclick="addToCart(${product.id})">
        </div>
    </div>
</div>
`;
productContainer.insertAdjacentHTML('beforeend', productCard);
});
}
</script>




<!-- ==================== Breadcumb Start Here ==================== -->
<section class="breadcumb py-120 bg-img" style="background-image: url(../static/assets/picture/breadcumb-img.png);">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <div class="breadcumb__wrapper">
                    <h1 class="breadcumb__title"> Product Category</h1>
                    <ul class="breadcumb__list">
                        <li class="breadcumb__item"><a href="index.html" class="breadcumb__link"> <i class="las la-home"></i> Home</a> </li>
                        <li class="breadcumb__item"> / </li>
                        <li class="breadcumb__item"> <span class="breadcumb__item-text"> Product Category </span> </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- ==================== Breadcumb End Here ==================== -->




<!-- ==================product category two section start here ==============================-->
<div class="product-category-two py-120 ">
    <div class="container">
        <div class="row">
            <div class="col-lg-3"><!--过滤器选择器-->

                <div class="left-sidebar">
    <span class="close-sidebar d-lg-none d-block">
        <i class="las la-times"></i>
    </span>
                    <h6 class="sidebar-item__title">
                        Category
                    </h6>
                    <div class="sidebar-item">
                        <div class="form-check form--check">
                            <input class="form-check-input category-filter" type="checkbox" value="dogfood" id="dogfood">
                            <label class="form-check-label" for="dogfood">Dog Food</label>
                        </div>
                        <div class="form-check form--check">
                            <input class="form-check-input category-filter" type="checkbox" value="catfood" id="catfood">
                            <label class="form-check-label" for="catfood">Cat Food</label>
                        </div>
                        <div class="form-check form--check">
                            <input class="form-check-input category-filter" type="checkbox" value="fish" id="fish">
                            <label class="form-check-label" for="fish">Fish</label>
                        </div>
                        <div class="form-check form--check">
                            <input class="form-check-input category-filter" type="checkbox" value="pettoy" id="pettoy">
                            <label class="form-check-label" for="pettoy">Pet Toy</label>
                        </div>
                        <div class="form-check form--check">
                            <input class="form-check-input category-filter" type="checkbox" value="parrotfood" id="parrotfood">
                            <label class="form-check-label" for="parrotfood">Parrot Food</label>
                        </div>
                        <div class="form-check form--check">
                            <input class="form-check-input category-filter" type="checkbox" value="rabbit" id="rabbit">
                            <label class="form-check-label" for="rabbit">Rabbit</label>
                        </div>
                        <div class="form-check form--check">
                            <input class="form-check-input category-filter" type="checkbox" value="accessories" id="accessories">
                            <label class="form-check-label" for="accessories">Accessories</label>
                        </div>
                        <div class="form-check form--check">
                            <input class="form-check-input category-filter" type="checkbox" value="smallpet" id="smallpet">
                            <label class="form-check-label" for="smallpet">Small Pet</label>
                        </div>
                    </div>
                    <div class="sidebar-item">
                        <h5 class="sidebar-item__title">Filter by Price</h5>
                        <div class="custom--range">
                            <div id="slider-range" class="custom--range__range"></div>
                            <div class="custom--range__content d-flex flex-wrap justify-content-between">
                                <label for="amount" class="custom--range__text">Price range:</label>
                                <input type="text" class="custom--range__prices" id="amount" readonly>
                            </div>
                        </div>
                        <div class="sidebar-item__button">
                            <button id="filter-button" class="btn btn--base pill btn--sm">Filter</button>
                        </div>
                    </div>
                </div>
            </div>





            <div class="col-lg-9">
                <div class="row justify-content-center gy-4"  id="product-list">
                    <div class="col-lg-4 col-md-6 col-sm-6 col-xsm-6" th:each="product : ${products}">
                        <div class="product-item">
                            <div class="product-itemthumb">
                                <a th:href="@{/product(id=${product.getId()})}" class="product-itemthumb-link">
                                    <img th:src="${product.getImgurl()}" alt="">
                                </a>
                                <button class="product-itemicon">
                    <span class="product-itemicon-style">
                        <i class="las la-heart"></i>
                    </span>
                                </button>
                                <div class="product-itembadge" >
                                    <span class="badge badge--base">Sale</span>
                                </div>
                            </div>
                            <div class="product-itemcontent">
                                <h5 class="product-itemtitle">

                                    <a th:href="@{/product(id=${product.getId()})}" class="product-itemthumb-link"  th:text="${product.getName()}"    >Product Name</a>

                                </h5>
                                <ul class="product-info__rating justify-content-center">
                                    <li class="product-info__rating-item">
                                        <i class="fas fa-star"></i>
                                    </li>
                                    <li class="product-info__rating-item">
                                        <i class="fas fa-star"></i>
                                    </li>
                                    <li class="product-info__rating-item">
                                        <i class="fas fa-star"></i>
                                    </li>
                                    <li class="product-info__rating-item">
                                        <i class="fas fa-star"></i>
                                    </li>
                                    <li class="product-info__rating-item">
                                        <i class="fas fa-star"></i>
                                    </li>
                                    <li class="product-infonumber" >5.0</li>
                                </ul>
                                <h6 class="product-item__price">
                                    <span class="product-item__price-new" th:text="'￥'+${product.getOldprice()}">200</span>
                                    <span class="product-itemprice-old" th:text="'￥'+${product.getPrice()}"  >180</span>
                                </h6>
                                <input type="hidden" class="btn btn--base pill btn--sm"  th:id="category"    th:value="${product.getCategoryid()}" >

                                <input type="button" class="btn btn--base pill btn--sm" value="添加到购物车" th:onclick="|addToCart(${product.getId()})|"></input>
                            </div>
                        </div>
                    </div>
                </div>


                <!--分页按钮-->

                <!-- 分页按钮 -->
                <nav aria-label="Page navigation example">
                    <ul class="pagination justify-content-center">
                        <!-- 上一页按钮 -->
                        <li class="page-item" th:classappend="${currentPage == 1} ? 'disabled' : ''">
                            <a class="page-link" th:href="@{/products(page=${currentPage != null ? currentPage - 1 : 1})}"  style="padding: 5px 6px" aria-label="Previous">

                                <span aria-hidden="true" class="ml-1">&laquo;</span> <!-- 添加 margin-left -->
                            </a>
                        </li>

                        <!-- 动态生成页码按钮 -->
                        <li class="page-item"  th:classappend="${page == currentPage} ? 'active' : ''">
                            <a class="page-link" th:href="@{/products(page=${page})}" th:text="${currentPage}">1</a>

                        </li>

                        <!-- 下一页按钮 -->
                        <li class="page-item" th:classappend="${currentPage == totalPages} ? 'disabled' : ''">
                            <a class="page-link" th:href="@{/products(page=${currentPage != null ? currentPage + 1 : 2})}"style="padding: 5px 6px"  aria-label="Next">
                                <span aria-hidden="true" class="ml-1">&raquo;</span> <!-- 添加 margin-left -->
                            </a>
                        </li>
                    </ul>
                </nav>




            </div>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js"></script>
<!-- 引入 Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
    // 初始化价格滑块
    $(function() {
        $("#slider-range").slider({
            range: true,
            min: 0,
            max: 2000,
            values: [0, 2000],
            slide: function(event, ui) {
                $("#amount").val("￥" + ui.values[0] + " - ￥" + ui.values[1]);
            }
        });
        $("#amount").val("￥" + $("#slider-range").slider("values", 0) + " - ￥" + $("#slider-range").slider("values", 1));
    });

    // 存储选中的分类
    let selectedCategories = [];

    // 监听分类复选框的变化
    document.querySelectorAll('.category-filter').forEach(filter => {
        filter.addEventListener('change', function() {
            if (this.checked) {
                selectedCategories.push(this.value);
            } else {
                selectedCategories = selectedCategories.filter(cat => cat !== this.value);
            }
        });
    });

    // 处理筛选按钮点击事件
    document.getElementById('filter-button').addEventListener('click', function() {
        const categories = selectedCategories.join(',');
        const minPrice = $("#slider-range").slider("values", 0);
        const maxPrice = $("#slider-range").slider("values", 1);
console.log(categories);
console.log(minPrice);
console.log(maxPrice);

        fetch(`/api/filter?categories=${encodeURIComponent(categories)}&minPrice=${minPrice}&maxPrice=${maxPrice}`)
            .then(response => response.json())
            .then(data => {
                console.log(data);
                updateProductList(data);
            })
            .catch(error => {
                console.error('Error:', error);
            });
    });

    // 更新商品列表
    function updateProductList(products) {
        const productContainer = document.getElementById('product-list');
        productContainer.innerHTML = '';

        if (products.length === 0) {
            productContainer.innerHTML = '<p>No results found.</p>';
            return;
        }

        products.forEach(product => {
            const productCard = `
                    <div class="col-lg-4 col-md-6 col-sm-6 col-xsm-6">
                        <div class="product-item">
                            <div class="product-itemthumb">
                                <a href="/product?id=${product.id}" class="product-itemthumb-link">
                                    <img src="${product.imgurl}" alt="">
                                </a>
                                <button class="product-itemicon">
                                    <span class="product-itemicon-style">
                                        <i class="las la-heart"></i>
                                    </span>
                                </button>
                                <div class="product-itembadge">
                                    <span class="badge badge--base">Sale</span>
                                </div>
                            </div>
                            <div class="product-itemcontent">
                                <h5 class="product-itemtitle">
                                    <a href="/product?id=${product.id}" class="product-itemthumb-link">${product.name}</a>
                                </h5>
                                <ul class="product-info__rating justify-content-center">
                                    <li class="product-info__rating-item">
                                        <i class="fas fa-star"></i>
                                    </li>
                                    <li class="product-info__rating-item">
                                        <i class="fas fa-star"></i>
                                    </li>
                                    <li class="product-info__rating-item">
                                        <i class="fas fa-star"></i>
                                    </li>
                                    <li class="product-info__rating-item">
                                        <i class="fas fa-star"></i>
                                    </li>
                                    <li class="product-info__rating-item">
                                        <i class="fas fa-star"></i>
                                    </li>
                                    <li class="product-infonumber">5.0</li>
                                </ul>
                                <h6 class="product-item__price">
                                    <span class="product-item__price-new">￥${product.oldprice}</span>
                                    <span class="product-itemprice-old">￥${product.price}</span>
                                </h6>
                                <input type="hidden" class="btn btn--base pill btn--sm" value="${product.categoryid}">
                                <input type="button" class="btn btn--base pill btn--sm" value="添加到购物车" onclick="addToCart(${product.id})">
                            </div>
                        </div>
                    </div>
                `;
            productContainer.insertAdjacentHTML('beforeend', productCard);
        });
    }
</script>




<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
    function addToCart(productid) {
        // 构建要发送的数据
        var data = {
            productid: productid

        };

        // 发送 AJAX 请求
        $.ajax({
            type: 'POST', // 或者 'GET'，取决于您的后端期望的请求类型
            url: '/add-to-cart', // 后端处理添加到购物车的 URL
            contentType: 'application/json', // 发送的数据类型
            data: JSON.stringify(data), // 将 JavaScript 对象转换为 JSON 字符串
            dataType: 'json', // 预期从服务器返回的数据类型
            success: function(response) {
                // 请求成功时执行的函数
                // response 是从服务器返回的数据
                alert('添加成功');
                // 这里可以更新购物车图标或显示购物车中的商品数量
            },
            error: function(xhr, status, error) {
                // 请求失败时执行的函数
                alert('请先登录' + error);
            }
        });
    }





</script>








<!-- ==================product category two section end here ==============================-->
<!--============================feature section start here =======================-->
<div class="feature-section bg-img py-60" style="background-image: url(../static/assets/picture/feature-img.png);">
    <div class="container">
        <div class="row gy-4">
            <div class="col-md-3 col-sm-6 col-xxsm-6">
                <div class="feature-item">
                    <div class="feature-item__thumb">
                        <img src="assets/picture/f04.png" alt="">
                    </div>
                    <div class="feature-item__info">
                        <h5 class="feature-item__title">
                            FREE SHIPPING
                        </h5>
                        <span class="feature-item__payment"> For All Order Over $99 </span>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-6 col-xxsm-6">
                <div class="feature-item">
                    <div class="feature-item__thumb">
                        <img src="assets/picture/f03.png" alt="">
                    </div>
                    <div class="feature-item__info">
                        <h5 class="feature-item__title">
                            FRIENDLY SUPPORT
                        </h5>
                        <span class="feature-item__payment"> 24/7 Customer Support </span>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-6 col-xxsm-6">
                <div class="feature-item">
                    <div class="feature-item__thumb">
                        <img src="assets/picture/f02.png" alt="">
                    </div>
                    <div class="feature-item__info">
                        <h5 class="feature-item__title">
                            SECURE PAYMENT
                        </h5>
                        <span class="feature-item__payment">100%  Secure Payment</span>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-6 col-xxsm-6">
                <div class="feature-item">
                    <div class="feature-item__thumb">
                        <img src="assets/picture/f01.png" alt="">
                    </div>
                    <div class="feature-item__info">
                        <h5 class="feature-item__title">
                            SHIPPING & RETURN
                        </h5>
                        <span class="feature-item__payment"> within 30days For Refund </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<!-- ==========================feature setion end here ============================-->



<!-- ========footer===== -->

<!-- ==================== Footer Start Here ==================== -->
<footer class="footer-area section-bg-light bg-img">
    <div class="pb-60 pt-120">
        <div class="container">
            <div class="row justify-content-center gy-5">
                <div class="col-xl-3 col-sm-6">
                    <div class="footer-item">
                        <div class="footer-item__logo">
                            <a href="index.html"> <img src="assets/picture/footer-logo02.png" alt=""></a>
                        </div>
                        <p class="footer-item__desc"> Maecenas tempus tellus eget cdimentum rhoncus sem quam semper </p>
                        <ul class="social-list">
                            <li class="social-list__item"><a href="javascript:;" class="social-list__link"><i class="fab fa-facebook-f"></i></a> </li>
                            <li class="social-list__item"><a href="javascript:;" class="social-list__link"> <i class="fab fa-twitter"></i></a></li>
                            <li class="social-list__item"><a href="javascript:;" class="social-list__link"> <i class="fab fa-linkedin-in"></i></a></li>
                            <li class="social-list__item"><a href="javascript:;" class="social-list__link"> <i class="fab fa-pinterest-p"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-xl-1 d-xl-block d-none"></div>
                <div class="col-xl-2 col-sm-6">
                    <div class="footer-item">
                        <h5 class="footer-item__title"> Pages </h5>
                        <ul class="footer-menu">
                            <li class="footer-menu__item"><a href="about.html" class="footer-menu__link"> About Us</a></li>
                            <li class="footer-menu__item"><a href="faq.html" class="footer-menu__link"> Faq</a></li>
                            <li class="footer-menu__item"><a href="cart.html" class="footer-menu__link">Shopping Cart </a></li>
                            <li class="footer-menu__item"><a href="blog.html" class="footer-menu__link"> Blog</a></li>
                            <li class="footer-menu__item"><a href="product-two-details.html" class="footer-menu__link"> Product Details</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-xl-2 col-sm-6">
                    <div class="footer-item">
                        <h5 class="footer-item__title"> Useful link </h5>
                        <ul class="footer-menu">
                            <li class="footer-menu__item"><a href="" class="footer-menu__link"> Product Category </a></li>
                            <li class="footer-menu__item"><a href="check-out.html" class="footer-menu__link">Checkout </a></li>
                            <li class="footer-menu__item"><a href="login.html" class="footer-menu__link">Login </a></li>
                            <li class="footer-menu__item"><a href="registration.html" class="footer-menu__link"> Registration </a></li>
                            <li class="footer-menu__item"><a href="contact.html" class="footer-menu__link"> Contact Us </a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-xl-1 d-xl-block d-none"></div>
                <div class="col-xl-3 col-sm-6">
                    <div class="footer-item">
                        <h5 class="footer-item__title">Subscribe now</h5>
                        <div class="subscriber-form mb-3">
                            <input type="text" class=" form--control style-two" placeholder="Email Address" aria-label="Recipient's username">
                            <button class="btn btn--base subscribe-button"><i class="fas fa-paper-plane"></i></button>
                          </div>
                          <p>Subscribe to our newsletter and get 10% off your first purchase..</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
  <!-- Footer Top End-->
  
    <!-- bottom Footer -->
    <div class="bottom-footer section-bg py-3">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="bottom-footer__text">  Copyright &copy; 2023 . All rights reserved by Viserpet.</div>
                </div>
            </div>
        </div>
    </div>
  </footer>
  <!-- ==================== Footer End Here ==================== -->
  

<!-- Jquery js -->
<script data-cfasync="false" src="assets/js/email-decode.min.js"></script><script src="assets/js/jquery-3.6.1.min.js"></script>
<!-- Popper js -->
<script src="assets/js/popper.min.js"></script>
<!-- Bootstrap Js -->
<script src="assets/js/bootstrap.min.js"></script>
<!-- Slick js -->
<script src="assets/js/slick.min.js"></script>
<!-- countdown js -->
<script src="assets/js/jquery.knob.js"></script>
<script src="assets/js/jquery.throttle.js"></script>
<script src="assets/js/jquery.classycountdown.min.js"></script>
<!-- range js -->
<script src="assets/js/jquery-ui.js"></script>
<!-- magnific popup js -->
<script src="assets/js/jquery.magnific-popup.min.js"></script>
 <!-- main js -->
 <script src="assets/js/main.js"></script>

</body>
</html>
